<template>
  <div id="app">
    <img alt="vue logo" src="./img/wzry.png" />
    <br />
    <input type="text" v-model="newItem" />
    <input type="button" value="添加" @click="sub" />

    <input type="button" v-if="discolorationtext" value="变色" @click="discoloration"/>
    <input type="button" v-else value="暂停" @click="discoloration"/>

    <!-- 遍历出lists 并将lists的值赋给aaa组件的title属性                 定义aaa组件发出的remove事件                                                                                                                                      -->
    <aaa
      v-for="(item, index) in lists"
      :key="item.id"
      :id="index"
      :title="item.toDoItem"
      :bianColor="colorbian"
      @remove="lists.splice(index, 1)"
    />
  </div>
</template>

<script>
// 引用aaa组件
import aaa from "./components/aaa.vue";

export default {
  name: "App",
  // 注册组件
  components: {
    aaa,
  },
  data() {
    return {
      newItem: "",
      colorbian:false,
      discolorationtext:true,
      lists: [
        {
          id: 1,
          toDoItem: "计算机网络",
        },
        {
          id: 2,
          toDoItem: "数据库运维",
        },
        {
          id: 3,
          toDoItem: "高级神秘感",
        },
      ],
    };
  },
  methods: {
    sub() {
      console.log(this.newItem);
      if (this.newItem != null && this.newItem != "") {
        //输入框中的值添加到数组中
        this.lists.push({
          id: this.lists.length + 1,
          toDoItem: this.newItem,
        });
        // 清空输入框内容
        this.newItem = "";
      }else{
        alert("添加不能为空");
      }
    },
    discoloration(){
        this.colorbian=!this.colorbian
        this.discolorationtext=!this.discolorationtext
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
* {
  list-style-type: none;
  text-decoration: none;
  background-color: pink;
  font-size: 30px;
}
</style>
